/*
 * 水位站信息 弹框
 * @ 劳兆城
 * @ 2017-08-23
 */

<template>
  <interact-model ref="interact-model" title="水功能区信息" class="waterLevel-model">
    <div class="waterLevel-warpper">
      <div class="waterLevel-tabs">
        <Tabs type="card" v-model="activeTab" :animated="false">
          <TabPane label="基础信息" name="info"></TabPane>
        </Tabs>
      </div>

      <div class="waterLevel-content">
        <div class="waterLevel-table" v-show="activeTab === 'info'">
          <div class="table">
            <div v-for="(value, key, index) in waterLevelInfo">
              <div>{{key}}</div>
              <div>{{value}}</div>
            </div>
          </div>
        </div>
      </div>

      <loading v-show="showLoading"></loading>
    </div>
  </interact-model>
</template>

<script>
import { loadingMixin, interactModelMixin, aPictureModelMixin } from 'common/js/mixins'
import { wateringLogging } from 'common/js/echart'
import { ERR_OK } from 'api/config'
import { getWaterloggingInfo } from 'api/aPicture'

export default {
  mixins: [loadingMixin, interactModelMixin, aPictureModelMixin],
  created () {
    this.echart = null
  },
  data () {
    return {
      activeTab: 'info',
      showLoading: false,
      showEchart: false,
      waterLevelInfo: {}
    }
  },
  methods: {
    show (feature, layerNames) {
      this.activeTab = 'info'
      this.showEchart = false
      this.$refs['interact-model'].showModel()
      let obj = feature.getProperties()
      delete obj.geometry
      this.waterLevelInfo = JSON.parse(JSON.stringify(obj))
    }
  }
}
</script>

<style lang="scss">
.waterLevel-model {
  width: 600px;
  height: 450px;
  .waterLevel-warpper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    .waterLevel-tabs {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 5px;
      .ivu-tabs-bar {
        background-color: white !important;
        .ivu-tabs-tab {
          color: #444;
        }
        .ivu-tabs-nav {
          .ivu-tabs-tab-active {
            color: #2d8cf0 !important;
          }
        }
      }
    }
    .waterLevel-content {
      position: absolute;
      left: 5px;
      right: 5px;
      top: 40px;
      bottom: 5px;
      .waterLevel-table {
        width: 100%;
        .table {
          width: 100%;
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          > div{
            border: 1px solid #ccc;
            width: 50%;
            display: flex;
            align-items: center;
            > div{
              width: 50%;
              padding: 5px;
              &:nth-of-type(odd){
                border-right: 1px solid #ccc;
              }
            }
          }
        }
      }
      .waterLevel-echarts {
        width: 100%;
        height: 100%;
        margin: auto;
        overflow: hidden;
        .waterLevel-echart {
          width: 100%;
          height: 100%;
        }
        .waterLevel-nodata {
          width: 100%;
          height: 100%;
          text-align: center;
          background-image: url('../img/aPictureNoCount.png');
          background-position: center 35%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
